<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Pocket Voltex - Config</title>
        <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="js/usbWrapper.js"></script>
        <script type="text/javascript" src="js/config.js"></script>
        <script type="text/javascript" src="js/settings.js"></script>
        <script type="text/javascript" src="js/updater.js"></script>
        <script type="text/javascript" src="js/md5.min.js"></script>
        <script type="text/javascript" src="js/jscolor.min.js"></script>
        <script type="text/javascript">
            window.addEventListener("load", function() {
                UsbWrapper_init();
                if(UsbWrapper.hasUSB) {
                    document.getElementById("compat-failure").classList.add("hidden");
                    document.getElementById("connectBtn").classList.remove("hidden");
                    document.getElementById("logview").classList.remove("hidden");
                    
                    config = new Config();
                    
                    navigator.usb.getDevices()
                    .then(devices => {
                        if(devices.length) {
                            config.connect(devices[0]);
                        }
                    });
                    
                    navigator.usb.addEventListener('connect', event => {
                        config.connect(event.device);
                    });
                    navigator.usb.addEventListener('disconnect', event => {
                        config.disableUI();
                    });
                }
            });
        </script>
    </head>
    <body>
        <div class="center">
            <div id="compat-failure">
            This configurator requires Javascript, Windows 7+ (or OSX/Linux) and a WebUSB capable browser (Chrome 57+). If you lack these, harass mon for an exe config app.
            </div>
            <div>
                <div id="logview" class="hidden"></div>
                <!--<div id="configBox" class="configBox hidden disabled">
                </div>-->
                <div id="connect" class="connect">
                    <button id="connectBtn" class="hidden" onclick="config.connectNew()">Connect</button>
                </div>
                <div id="boardSelector" class="hidden">
                    <div class="big">Select your board:</div>
                    <img class="board" src="img/r6-topdown-small.png" onclick="config.selectBoard(6);">
                    <img class="board" src="img/r4-topdown-small.png" onclick="config.selectBoard(4);">
                </div>
                <div id="configOptions" class="configOptions">
                </div>
            </div>
        </div>
    </body>
</html>
